<template>
  <div class="h-screen bg-light-400 p-4">
    <div class="overflow-hidden rounded-xl">
      <img src="https://1.s91i.faiusr.com/4/AFsIkK06EAQYACC5-sTmBSiIwMOYATDuBTjoAg%21800x800.png?_tm=3&v=1603356183923" alt="" />
    </div>
    <div class="mt-4">
      <div class="text-xl mt-5">填写招生线索</div>
      <nut-form ref="ruleForm" :model-value="userForm" @touchstart="touchstart">
        <nut-form-item label="姓名" required prop="name" :rules="[{ required: true, message: '请填写姓名' }]">
          <nut-input v-model="userForm.name" class="nut-input-text" placeholder="请输入姓名" type="text" />
        </nut-form-item>
        <nut-form-item
          label="联系电话"
          required
          prop="phone"
          :rules="[
            { required: true, message: '请填写联系方式' },
            { regex: /^1[3456789]\d{9}$/, message: '手机号格式错误' },
          ]"
        >
          <nut-input v-model="userForm.phone" class="nut-input-text" placeholder="请输入联系电话" type="text" />
        </nut-form-item>
        <nut-form-item label="地址" prop="address">
          <nut-input class="nut-input-text" placeholder="请输入地址" type="text" v-model="userForm.address" />
        </nut-form-item>
        <nut-form-item label="备注" prop="comment">
          <nut-textarea v-model="userForm.comment" placeholder="请输入备注" limit-show max-length="200" type="text" />
        </nut-form-item>
      </nut-form>
    </div>
    <div class="mt-6">
      <nut-button type="info" block @click="submit">提交线索</nut-button>
    </div>
    <div class="text-zinc-400 text-sm mt-6">
      备注：填写学员招生线索上报，学员成交后可获取邀请奖励返现。上报线索一个月有效期内，最先上报的推广员可获得奖励佣金返现，超过有效期可重新上报线索绑定推广员。
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { showToast, Form } from "@nutui/nutui";
import "@nutui/nutui/dist/packages/toast/style";
import * as promotionApi from "@/api/train/promotion";

const router = useRouter();
const ruleForm = ref<typeof Form | null>(null);
const userForm = ref<ClueSubmitParam>({} as ClueSubmitParam);
const needClearValidate = ref(false);
const submit = () => {
  ruleForm.value?.validate().then(async ({ valid, errors }: any) => {
    if (valid) {
      // 提交线索
      let res = await promotionApi.submitClue({ ...userForm.value });
      if (res.data.isSuccess) {
        showToast.success("提交线索成功");
        setTimeout(() => {
          router.push(`/promotion`);
        }, 1000);
      } else {
        showToast.warn(res.data.failReason || "提交线索失败");
      }
    } else {
      showToast.warn("信息填写有误");
      needClearValidate.value = true;
    }
  });
};
const touchstart = () => {
  if (needClearValidate.value) {
    ruleForm.value?.reset();
    needClearValidate.value = false;
  }
};

onActivated(() => {
  userForm.value = {} as ClueSubmitParam;
});
</script>
